<template>
  <el-aside width="200px"
            style="background-color:rgb(0 36 70)">
    <el-row class="tac">
      <el-col>
        <el-menu default-active="1"
                 class="el-menu-vertical-demo"
                 background-color="rgb(0 36 70)"
                 text-color="#c3c6ca"
                 active-text-color="#fff"
                 @open="handleOpen"
                 @close="handleClose">
          <el-menu-item index="1"
                        @click="goPage('home')">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1"
                            @click="goPage('/datasource')">数据源管理
              </el-menu-item>
              <el-menu-item index="2-2"
                            @click="goPage('/quartz')">调度管理
              </el-menu-item>
              <el-menu-item index="2-3"
                            @click="goPage('/esbplus')">服务编排
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script>
  var $this = {}
  export default {
    data() {
      return {}
    },
    beforeCreate() {
      $this = this
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      },

      goPage(link) {
        if (link === 'home') {
          $this.$router.push('/').catch(error => error)
        } else {
          $this.$router.push(link).catch(error => error)
        }
        //   } else if ((link === 'routerSetting')) {
        //     $this.$router.push('/routerSetting').catch(error => error)
        //   } else {

        //   }
      }
    }
  }
</script>

<style scoped>
  .el-row {
    height: 100%;
  }

  .el-menu {
    border-right: none;
  }

  .el-menu-item.is-active {
    background-color: rgb(24 144 255) !important;
    color: #fff;
  }

  .el-menu-item:hover {
    background-color: rgb(24 144 255) !important;
    color: #fff !important;
  }
</style>
